<template>
  <div>
    <!-- 预定登记 -->

    <!-- 搜索 -->
    <el-card class="card">
      <el-form ref="ruleFormRef" :inline="true" class="demo-form-inline" :model="params">
        <el-form-item label="老人姓名：" prop="name">
          <el-input v-model="params.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="身份证号：" prop="idCard">
          <el-input v-model="params.idCard" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="预定床位：" prop="idCard">
          <el-cascader v-model="params.begId" :props="props" :options="getcounts" @change="handleChange" clearable />
        </el-form-item>
        <el-form-item label="手机号：" prop="mobile">
          <el-input v-model="params.mobile" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card class="card">
      <ELTable v-bind="tableConfig" ref="reserveTable">
        <template #elderlyGender="{scope}">
          {{ scope.row.elderlyGender=="1"?'男':'女' }}
        </template>
        <template #addTime="{ scope }">
          {{ dayJs(scope.row.addTime).format("YYYY-MM-DD HH:mm") }}
        </template>
        <template #btns="{ deleteAll }">
          <el-button type="success" :icon="Plus" @click="add">新增</el-button>
          <el-button :icon="Delete" type="danger" @click="deleteAll">批量删除</el-button>
        </template>
        <template #operate="{ scope }">
          <el-button type="primary" :icon="Edit" text @click="update(scope.row.id)">编辑</el-button>
        </template>
      </ELTable>
    </el-card>
    <selectElderly v-if="dialogVisible" @close="closeHandle"></selectElderly>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,onMounted } from 'vue';
import {useRouter} from 'vue-router'
import type { FormInstance } from 'element-plus'
import ELTable, { TableData } from '../../components/ELTable.vue'
import dayJs from 'dayjs'
import selectElderly from '../../components/market/reserve/elderly/selectElderly.vue'
import { ListParams } from '../../api/market/reserve/type'
import { getReserveList,delAll } from '../../api/market/reserve/reserve'
import { bedList } from '@/api/config/bed/bed'
import { buildTree } from '@/utils/treeUtil'
import { badListParams } from '@/api/config/bed/type'
import { houseList } from '@/api/config/house/house'
import { listParams } from '@/api/config/house/type'
import { buildingListData } from '@/api/config/building/type'
import { buildingList } from '@/api/config/building/building'
import {
  Plus,
  Delete,
  Edit,
  Search,
  Refresh
} from '@element-plus/icons-vue'

const router=useRouter();

const reserveTable=ref();

//级联选择器格式转换
const props = { label: 'name', value: 'id' }

// 楼栋列表
const buildList = ref<buildingListData[]>([])
const getBuildingList = async () => {
  let res = await buildingList()
  buildList.value = res.list;
  getHouseList();
}

//房间列表
const houseParams = reactive<listParams>({
  page: 1,
  pageSize: 1000,
  name: '',
  buildingId: undefined,
})
const house_list = ref<any[]>([]);
const getHouseList = async () => {
  let res = await houseList(houseParams);
  house_list.value = res.list.map(item => ({
    id: item.id,
    name: item.name,
    pid: item.buildingId
  }))
  getBedList();
}
//床位
const bedParams = reactive<badListParams>({
  houseId: undefined,
  page: 1,
  pageSize: 1000
})
const bedListData = ref<any>([])
const getBedList = async () => {
  let res = await bedList(bedParams)
  bedListData.value = res.list.map(item => ({
    id: item.id,
    name: item.name,
    pid: item.houseId
  }))
  mergeData([...buildList.value, ...house_list.value, ...bedListData.value])
  // console.log("1111",bedListData.value);

}


//选择床位
const handleChange = (data: any) => {
  // console.log("7777data",data);

  if (data) {
    bedParams.houseId = data[data.length - 1];
    params.begId = data[data.length - 1];
    getBedList();
  }
}


// 合并
const getcounts = ref([])
const mergeData = (data: any) => {
  getcounts.value = buildTree(data);
  // console.log("getCounts999",getcounts.value);

}

const ruleFormRef = ref<FormInstance>()


//查询参数
const params = reactive<ListParams>({});

//查询
const search = () => {
  reserveTable.value.getData(params);
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const tableConfig = reactive<TableData>({
  loadData: getReserveList,
  deleteAll:delAll,
  columns: [
    {
      prop: "id",
      label: "序号",
    },
    {
      prop: "elderlyPhoto",
      label: "头像",
      image: true,
    },
    {
      prop: "elderlyName",
      label: "老人姓名",
    },
    {
      prop: "elderlyGender",
      label: "性别",
      slot: true,
    },
    {
      prop: "elderlyIdCard",
      label: "身份证号",
    },
    {
      prop: "name",
      label: "预定人姓名",
    },
    {
      prop: "mobile",
      label: "联系电话",
    },
    {
      prop: "relation",
      label: "与老人关系",
    },
    {
      prop: "begName",
      label: "预定床位",
    },
    {
      prop: "startDate",
      label: "开始日期",
    },
    {
      prop: "addTime",
      label: "预定时常（月）",
      slot: true,
    },
    {
      prop: "amount",
      label: "已缴定金",
    },
    {
      prop: "day",
      label: "剩余天数",
    },
    {
      prop: "startDate",
      label: "登记日期",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
    },
  ],
});

//修改预定登记
const update = (id: number) => {
  router.push(`/market/reserve-edit/${id}`)
}

//新增dialog
let dialogVisible = ref(false);

//添加
const add=()=>{
  dialogVisible.value=true;
}

//关闭dialog
const closeHandle=()=>{
  dialogVisible.value=false;
}

onMounted(()=>{
  getBuildingList()
})
</script>

<style scoped>
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
